import React, { useState, useEffect, useRef } from "react";
import './sellAnalyseBoard.css';
import ReactEcharts from "echarts-for-react";
import { Input, Modal, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import BorderTitle from '../../../components/BoardTitle/BoardTitle'
import ShowDataBlock from '../../../components/DataBoardTable/DataBoardTable'
import RotateList from '../../../components/RotateList/RotateList'
import logo from '../../../assets/images/u409.png'
import TimeView from "../../../components/TimeView/TimeView";
import ShowDate from '../../../utils/ShowDate.js'
import axios from "../../../http/index";
import GetListOption from './GetListOption'
import GetLineOption from './GetLineOption'
import GetPieOption from './GetPieOption'
import { useNavigate } from "react-router-dom";

const DataBoard = () => {
  const navigate = useNavigate();
  const EchartFull = { width: "100%", height: "100%" }
  const domRef = useRef()
  const [IsModalShow, SetIsModalShow] = useState(false)
  const [option,SetOption] = useState({})
  const [option2,SetOption2] = useState({})
  const [option3,SetOption3] = useState({})
  const [option4,SetOption4] = useState({})
  const [PicList,SetPicList] = useState([])
  const [BlockList,SetBlockList] = useState([])
  const [echartsStyle, setEchartsStyle] = useState({ width:"100%"})
  const [echarts2Style, setEcharts2Style] = useState({ width:"100%"})
  const [IsRotate, setIsRotate] = useState(false)

  const GetData = () => {
    axios({
      url: "/data/board",
      method: "GET",
      data: {
        currentPage: 1
      },
    })
    .then((res) => {
      SetOption(GetListOption(Object.keys(res.data.leftList),Object.values(res.data.leftList)))
      SetOption2(GetListOption(Object.keys(res.data.rightList),Object.values(res.data.rightList)))
      SetOption3(GetLineOption(res.data.middleList.title,res.data.middleList.xData,res.data.middleList.y1Data,res.data.middleList.y2Data,res.data.middleList.y1Title,res.data.middleList.y2Title))
      SetOption4(GetPieOption(res.data.pieList.legendList,res.data.pieList.data,res.data.pieList.days))
      SetPicList(res.data.picList)
      SetBlockList(res.data.blockData)
    })
    .catch((err) => {
      console.log(err);
    });
  }
  
  useEffect(() => {
    GetData()
    setTimeout(() => {
      setEchartsStyle(EchartFull)
    }, 10);
    setTimeout(() => {
      setIsRotate(true)
    }, 500);
  }, [])

  const FullScreen = () => {
    SetIsModalShow(true)
    setTimeout(() => {
      setEcharts2Style(EchartFull)
    }, 10);
  }

  const CloseModalShow = () => {
    SetIsModalShow(false)
  }

  const [isScrolle, setIsScrolle] = useState(true);

  /** 滚动速度，值越小，滚动越快 */
  const speed = 30;
  const warper = useRef();
  /** 原数据 */
  const childDom1 = useRef();
    // 开始滚动
  useEffect(() => {
    let timer;
    if (isScrolle) {
        timer = setInterval(()=>{
            warper.current.scrollTop >= childDom1.current.scrollHeight
            ? (warper.current.scrollTop = 0)
            : warper.current.scrollTop++;
        }, speed);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [isScrolle]);
  
  return (
    <>
      <div className="DataBoardWhole">
        <div className="DataBoard_Title">
          <div className="DataBoard_Title_Left">
            <div className="SearchButton">
              <div className="SearchButton_Icon">
                <SearchOutlined
                  style={
                    {
                      fontSize:'32px'
                    }
                  }
                />
              </div>
              <div className="SearchButton_Main">
                <Input placeholder="输入关键词" bordered={false} size='large'/>
              </div>
            </div>
          </div>
          <div className="DataBoard_Title_Middle">
            <p className="DataBoard_Title_Middle_Text">销售分析数据综合平台</p>
          </div>
          <div className="DataBoard_Title_Right RowFlex">
            <div className="NowTime">
              <TimeView></TimeView>
            </div>
            <div className="DateTime">
                {ShowDate()}
            </div>
            <div className="FullScreen">
              <Button type="text" className="FullScreen_Button" onClick={FullScreen}>全屏</Button>
            </div>
          </div>
        </div>
        <div className="DataBoard">
          <div className="DataBoardBox LeftWidth">
            <div className="DataBoard_Item LeftItemCase1">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='物料库存分布' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
              </div>
              <div className="DESCSubHeight">
                <ReactEcharts
                  style={echartsStyle}
                  option={option}
                  theme={"theme_name"}
                ></ReactEcharts>
              </div>
            </div>
            <div className="DataBoard_Item LeftItemCase2">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='物料品类前TOP5' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
              </div>
              <div className="DESCSubHeight">
                <ShowDataBlock></ShowDataBlock>
              </div>
            </div>
            <div className="DataBoard_Item LeftItemCase1">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='采购单实况' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
              </div>
              <div ref={domRef} className="DESCSubHeight">
                <RotateList TheList={1}></RotateList>
              </div>
            </div>
          </div>
          <div className="DataBoardBox MiddleWidth">
            <div className="DataBoard_MiddleItem LeftItemCase3">
              <div className="DataBoard_Item LeftItemCase4">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='经营概况' ButtonFun={()=>navigate("/order/list")} ButtonHidden={true}></BorderTitle>
                </div>
                <div className="DESCSubHeight">
                  {
                    BlockList && BlockList.map((item, index) => {
                      return (
                        <div className="DESCSubHeight_Item" key={index}>
                          <p>{item.title}</p>
                          <div className="DESCSubHeight_DigitalBox">
                            {
                              item.numArr.map((item, index) => {
                                return <div  key={index} className="DESCSubHeight_DigitalItem"><p className={IsRotate ? 'SpanRotate' : ''}>{ item }</p></div>
                              })
                            }
                            <span>万元</span>
                          </div>
                          <p>{item.left1}：￥{item.leftData}  {item.left2}：￥{item.rightData}</p>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
              <div className="DataBoard_Item LeftItemCase3">
                <ReactEcharts
                  style={echartsStyle}
                  option={option3}
                  theme={"theme_name"}
                ></ReactEcharts>
              </div>
            </div>
            <div className="DataBoard_Item LeftItemCase4">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='销售单实况' ButtonFun={()=>navigate("/order/list")} ></BorderTitle>
              </div>
              <div id='scrollList2' className="DESCSubHeight">
                <RotateList TheList={2}></RotateList>
              </div>
            </div>
          </div>
          <div className="DataBoardBox RightWidth">
            <div className="DataBoard_Item LeftItemCase1">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='仓库库存分布情况' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
              </div>
              <div className="DESCSubHeight">
                <ReactEcharts
                  style={echartsStyle}
                  option={option2}
                  theme={"theme_name"}
                ></ReactEcharts>
              </div>
            </div>
            <div className="DataBoard_Item LeftItemCase2">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='物料库龄情况' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
              </div>
              <div className="DESCSubHeight">
                <ReactEcharts
                  style={echartsStyle}
                  option={option4}
                  theme={"theme_name"}
                ></ReactEcharts>
              </div>
            </div>
            <div className="DataBoard_Item LeftItemCase1">
              <div className="DataBoardBox_SubTitle">
                <BorderTitle BoardText='库存盘点记录' ButtonFun={()=>navigate("/order/list")} ></BorderTitle>
              </div>
              <div className="DESCSubHeight WrapFlex" ref={warper}>
                <div ref={childDom1}>
                  {
                    PicList && PicList.map((item,index) => {
                      return (
                        <div className="ListWithPic" key={index}>
                          <div className="ListWithPic_Pic">
                            <img src={logo} alt="头像加载失败" />
                          </div>
                          <div className="ListWithPic_Col1">
                            <p>{ item.name }</p>
                            <p>{ item.GoodsName }</p>
                          </div>
                          <div className="ListWithPic_Col2">{ item.DealTime }</div>
                          <div className="ListWithPic_Col3">{ item.Num }</div>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Modal
        style={{
          maxWidth: "100vw",
          top: 0,
          paddingBottom: 0
        }}
        bodyStyle={{
          height: "100vh"
        }}
        width="100%"
        open={IsModalShow}
        footer={ null }
        onCancel={CloseModalShow}
        transitionName="" 
      >
        <div className="DataBoardWhole">
          <div className="DataBoard_Title">
            <div className="DataBoard_Title_Left">
              <div className="SearchButton">
                <div className="SearchButton_Icon">
                  <SearchOutlined
                    style={
                      {
                        fontSize:'32px'
                      }
                    }
                  />
                </div>
                <div className="SearchButton_Main">
                  <Input placeholder="输入关键词" bordered={false} size='large'/>
                </div>
              </div>
            </div>
            <div className="DataBoard_Title_Middle">
              <p className="DataBoard_Title_Middle_Text">销售分析数据综合平台</p>
            </div>
            <div className="DataBoard_Title_Right RowFlex">
              <div className="NowTime">
                <TimeView></TimeView>
              </div>
              <div className="DateTime">
                  {ShowDate()}
              </div>
            </div>
          </div>
          <div className="DataBoard">
            <div className="DataBoardBox LeftWidth">
              <div className="DataBoard_Item LeftItemCase1">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='物料库存分布' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
                </div>
                <div className="DESCSubHeight">
                  <ReactEcharts
                    style={echarts2Style}
                    option={option}
                    theme={"theme_name"}
                  ></ReactEcharts>
                </div>
              </div>
              <div className="DataBoard_Item LeftItemCase2">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='物料品类前TOP5' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
                </div>
                <div className="DESCSubHeight">
                  <ShowDataBlock></ShowDataBlock>
                </div>
              </div>
              <div className="DataBoard_Item LeftItemCase1">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='采购单实况' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
                </div>
                <div ref={domRef} className="DESCSubHeight">
                  <RotateList TheList={1}></RotateList>
                </div>
              </div>
            </div>
            <div className="DataBoardBox MiddleWidth">
              <div className="DataBoard_MiddleItem LeftItemCase3">
                <div className="DataBoard_Item LeftItemCase4">
                  <div className="DataBoardBox_SubTitle">
                    <BorderTitle BoardText='经营概况' ButtonFun={()=>navigate("/order/list")} ButtonHidden={true}></BorderTitle>
                  </div>
                  <div className="DESCSubHeight">
                    {
                      BlockList && BlockList.map((item, index) => {
                        return (
                          <div className="DESCSubHeight_Item" key={index}>
                            <p>{item.title}</p>
                            <div className="DESCSubHeight_DigitalBox">
                              {
                                item.numArr.map((item, index) => {
                                  return <div  key={index} className="DESCSubHeight_DigitalItem"><p className={IsRotate ? 'SpanRotate' : ''}>{ item }</p></div>
                                })
                              }
                              <span>万元</span>
                            </div>
                            <p>{item.left1}：￥{item.leftData}  {item.left2}：￥{item.rightData}</p>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>
                <div className="DataBoard_Item LeftItemCase3">
                  <ReactEcharts
                    style={echarts2Style}
                    option={option3}
                    theme={"theme_name"}
                  ></ReactEcharts>
                </div>
              </div>
              <div className="DataBoard_Item LeftItemCase4">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='销售单实况' ButtonFun={()=>navigate("/order/list")} ></BorderTitle>
                </div>
                <div id='scrollList2' className="DESCSubHeight">
                  <RotateList TheList={2}></RotateList>
                </div>
              </div>
            </div>
            <div className="DataBoardBox RightWidth">
              <div className="DataBoard_Item LeftItemCase1">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='仓库库存分布情况' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
                </div>
                <div className="DESCSubHeight">
                  <ReactEcharts
                    style={echarts2Style}
                    option={option2}
                    theme={"theme_name"}
                  ></ReactEcharts>
                </div>
              </div>
              <div className="DataBoard_Item LeftItemCase2">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='物料库龄情况' ButtonFun={()=>navigate("/order/list")}></BorderTitle>
                </div>
                <div className="DESCSubHeight">
                  <ReactEcharts
                    style={echarts2Style}
                    option={option4}
                    theme={"theme_name"}
                  ></ReactEcharts>
                </div>
              </div>
              <div className="DataBoard_Item LeftItemCase1">
                <div className="DataBoardBox_SubTitle">
                  <BorderTitle BoardText='库存盘点记录' ButtonFun={()=>navigate("/order/list")} ></BorderTitle>
                </div>
                <div className="DESCSubHeight WrapFlex" ref={warper}>
                  <div ref={childDom1}>
                    {
                      PicList && PicList.map((item,index) => {
                        return (
                          <div className="ListWithPic" key={index}>
                            <div className="ListWithPic_Pic">
                              <img src={logo} alt="头像加载失败" />
                            </div>
                            <div className="ListWithPic_Col1">
                              <p>{ item.name }</p>
                              <p>{ item.GoodsName }</p>
                            </div>
                            <div className="ListWithPic_Col2">{ item.DealTime }</div>
                            <div className="ListWithPic_Col3">{ item.Num }</div>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default DataBoard